<template>
  <div class="container">
    <div class="album-top">
      <h2>最新专辑</h2>
    </div>
    <div class="album-list">
      <div
        class="list-item"
        v-for="(ablum, index) in ablumList"
        :key="ablum.id"
      >
        <div class="list-img">
          <img
            class="list-img1"
            :src="ablum.picUrl"
            alt=""
            @mouseenter="changeMove(index)"
            @mouseleave="changeMove2"
          />
          <img
            class="list-img2"
            :class="{ move: moveIndex === index }"
            src="../../../public/images/black.png"
            alt=""
          />
        </div>
        <div class="list-span">
          <div class="list-span1">{{ ablum.name }}</div>
          <div class="list-span2">{{ ablum.artists[0].name }}</div>
          <div class="list-span3">发行时间：2021-03-08</div>
        </div>
      </div>
    </div>

    <!-- 分页器区域 -->
    <div class="album-bottom">
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="prev, pager, next, jumper, sizes, total"
        :total="ablumList.length"
      >
        >
      </el-pagination> -->
      <div class="iconfont icon-zuojiantou"></div>
      <ul class="pagiation">
        <li @click="handleclick(1)" :class="{ active: currentIndex === 1 }">
          1
        </li>
        <li @click="handleclick(2)" :class="{ active: currentIndex === 2 }">
          2
        </li>
        <li @click="handleclick(3)" :class="{ active: currentIndex === 3 }">
          3
        </li>
        <li @click="handleclick(4)" :class="{ active: currentIndex === 4 }">
          4
        </li>
        <li @click="handleclick(5)" :class="{ active: currentIndex === 5 }">
          5
        </li>
        <li @click="handleclick(6)" :class="{ active: currentIndex === 6 }">
          6
        </li>
        <li
          v-if="movein"
          @mouseenter="handlemove"
          class="iconfont icon-gedian"
        ></li>
        <li
          v-else
          @mouseleave="handlemove2"
          class="iconfont icon-sangejiantou"
        ></li>
        <li
          @click="handleclick(2000)"
          :class="{ active: currentIndex === 2000 }"
        >
          2000
        </li>
      </ul>
      <div class="iconfont icon-youjiantou"></div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "Album",
  data() {
    return {
      currentIndex: 1,
      moveIndex: -1,
      movein: true,
      pageNo: 1, // 分页的页码（第几页）
      pageSize: 5, // 分页的每页商品数量
    };
  },
  computed: {
    ...mapState({
      ablumList: (state) => state.home.ablumList,
    }),
  },
  methods: {
    ...mapActions(["getAblumList"]),
    // handleSizeChange(pageSize) {
    //   // console.log(pageSize);
    //   this.pageSize = pageSize;
    //   this.getAblumList();
    // },
    // handleCurrentChange(pageNo) {
    //   // console.log(pageNo);
    //   this.pageNo = pageNo;
    //   this.getAblumList();
    // },

    changeMove(index) {
      this.moveIndex = index;
    },
    changeMove2() {
      this.moveIndex = -1;
    },

    handleclick(index) {
      this.currentIndex = index;
    },

    handlemove() {
      this.movein = false;
    },

    handlemove2() {
      this.movein = true;
      console.log(111);
    },
  },
  mounted() {
    this.getAblumList();
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  .album-top {
    margin: 60px 0 30px;
    h2 {
      font-size: 28px;
    }
  }
  .album-list {
    width: 1230px;
    display: flex;
    flex-wrap: wrap;
    cursor: pointer;
    .list-item {
      width: 216px;
      height: 282px;
      margin-right: 30px;
      margin-bottom: 50px;
      .list-img {
        position: relative;
        width: 192px;
        height: 192px;
        .list-img1 {
          position: absolute;
          width: 192px;
          height: 192px;
          z-index: 102;
        }
        .list-img2 {
          position: absolute;
          top: 6px;
          left: 36px;
          width: 180px;
          height: 180px;
          z-index: 100;
        }
        .move {
          left: 46px;
          transition: 1s;
        }
      }
    }
    .list-span {
      margin-top: 18px;
      .list-span1 {
        font-size: 16px;
        color: #303133;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .list-span2 {
        margin-top: 6px;
        font-size: 14px;
        color: #909399;
      }
      .list-span3 {
        font-size: 14px;
        color: #909399;
        margin-top: 6px;
      }
    }
  }
  /* 分页器区域 */
  .album-bottom {
    display: flex;
    justify-content: center;
    cursor: pointer;
    .pagiation {
      display: flex;
      li {
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        padding: 0 4px;
        min-width: 32px;
        text-align: center;
      }
      .active {
        background-color: red;
      }
    }
    .icon-zuojiantou {
      height: 40px;
      line-height: 40px;
      padding: 0 6px;
    }
    .icon-youjiantou {
      height: 40px;
      line-height: 40px;
      padding: 0 6px;
    }
  }
}
</style>
